function elemDrag(elem) {
  var x,
    y,
    viewPortWidth = getViewportSize().width,
    viewPortHeight = getViewportSize().height,
    elemWidth = parseInt(getStyles(elem, 'width')), //380
    elemHeight = parseInt(getStyles(elem, 'height')); //200

  addEvent(elem, 'mousedown', function (e) {
    var e = e || window.event;
    //盒子边缘到盒子内部鼠标位置 = 页面坐标 - 盒子坐标
    x = pagePos(e).X - parseInt(getStyles(elem, 'left'));
    y = pagePos(e).Y - parseInt(getStyles(elem, 'top'));

    addEvent(document, 'mousemove', mouseMove);
    addEvent(document, 'mouseup', mouseUp);

    cancelBubble(e);
    e.preventDefault();
  });

  function mouseMove(e) {
    var e = e || window.event,
      //盒子左侧离视口左侧边缘的距离
      elemLeft = pagePos(e).X - x,
      elemTop = pagePos(e).Y - y;

    //盒子贴边情况处理
    if (elemLeft <= 0) {
      elemLeft = 0;
    } else if (elemLeft >= viewPortWidth - elemWidth) {
      elemLeft = viewPortWidth - elemWidth;
    }
    if (elemTop <= 0) {
      elemTop = 0;
    } else if (elemTop >= viewPortHeight - elemHeight) {
      elemTop = viewPortHeight - elemHeight;
    }

    //设置盒子的定位坐标(包括贴边处理的情况)
    elem.style.left = elemLeft + 'px';
    elem.style.top = elemTop + 'px';
  }

  function mouseUp(e) {
    var e = e || window.event;
    removeEvent(document, 'mousemove', mouseMove);
    removeEvent(document, 'mouseup', mouseUp);
  }
}

function pagePos(e) {
  //获取滚动条距离
  //使用获取滚动条距离函数
  var sLeft = getScrollOffset().left,
    sTop = getScrollOffset().top,
    //获取文档偏移
    //documentElement.clientLeft IE8及以下不存在(undefined)
    cLeft = document.documentElement.clientLeft || 0,
    cTop = document.documentElement.clientTop || 0;

  return {
    //可视区域坐标 + 滚动条距离 - 偏移距离
    X: e.clientX + sLeft - cLeft,
    Y: e.clientY + sTop - cTop
  };
}

function addEvent(el, type, fn) {
  if (el.addEventListener) {
    el.addEventListener(type, fn, false);
  } else if (el.attachEvent) {
    el.attachEvent('on' + type, function () {
      fn.call(el);
    });
  } else {
    el['on' + type] = fn;
  }
}

function cancelBubble(e) {
  var e = e || window.event;
  if (e.stopPropagation) {
    e.stopPropagation();
  } else {
    e.cancelBubble = true;
  }
}

function removeEvent(el, type, fn) {
  el.removeEventListener(type, fn, false);
}

function getScrollOffset() {
  if (window.pageXOffset) {
    return {
      left: window.pageXOffset,
      top: window.pageYOffset
    };
  } else {
    return {
      left: document.body.scrollLeft + document.documentElement.scrollLeft,
      top: document.body.scrollTop + document.documentElement.scrollTop
    };
  }
}

function getStyles(elem, prop) {
  //检测getComputedStyle是否存在
  if (window.getComputedStyle) {
    //存在，打印具体属性值
    if (prop) {
      return window.getComputedStyle(elem, null)[prop];
    }
    //不存在，打印集合
    return window.getComputedStyle(elem, null);
  } else {
    if (prop) {
      return elem.currentStyle[prop];
    } else {
      return elem.currentStyle;
    }
  }
}

function elemChildren(node) {
  var childItem,
    children = node.childNodes,
    len = children.length,
    temp = {
      length: 0,
      push: Array.prototype.push,
      splice: Array.prototype.splice
    };

  for (var i = 0; i < len; i++) {
    childItem = children[i];
    if (childItem.nodeType === 1) {
      temp.push(childItem);
    }
  }
  return temp;
}

//获取可视区域尺寸的函数
function getViewportSize() {
  if (window.innerWidth) {
    return {
      width: window.innerWidth,
      height: window.innerHeight
    };
  } else {
    if (document.compatMode === 'BackCompat') {
      return {
        width: document.body.clientWidth,
        height: document.body.clientHeight
      };
    } else {
      return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
      };
    }
  }
}
